<template>
  <div class="userIndex">
    <el-container>
      <el-header>
        <span class="search">人员搜索:</span>
        <el-input
          v-model="search"
          size="small"
          style="width: 200px"
          class="search"
          placeholder="请输入"
        />
        <el-button type="primary" icon="el-icon-search" style="width: 70px" size="small" @click="searchFn">查询</el-button>
      </el-header>
      <el-main>
        <el-button
          style="width:100px;background: linear-gradient(135deg,#ff9743,#ff5e20)!important;"
          icon="el-icon-circle-plus-outline"
          type="danger"
          size="small"
          @click="open('add')"
        > 新建</el-button>
        <TableComponent
          :table-cols="tableCols"
          :table-data="tableData"
          :is-loading="isLoading"
        >
          <template #otherTableCol>
            <el-table-column
              label="操作"
              align="center"
              width="150px"
            >
              <template #default="{ row }">
                <div class="actions">
                  <el-button
                    type="text"
                    @click="open('edit', row.id)"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="text"
                    style="color: red"
                    @click="del(row.id)"
                  >
                    删除
                  </el-button></div>
              </template>
            </el-table-column>
          </template>
        </TableComponent>
      </el-main>
      <el-footer>
        <span>共{{ total }}条记录</span>&nbsp;&nbsp;
        <span>第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        <el-pagination
          style="float: right"
          background
          :current-page="+queryObj.pageIndex"
          :page-size="+queryObj.pageSize"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, next"
          :total="+total"
          @current-change="handleCurrentChange"
        />
      </el-footer>
    </el-container>
    <Dialog ref="dialog" :text="text" :current-id="currentId" />
  </div>
</template>

<script>
import Dialog from './components/dialog.vue'
import { delPeople, getPeopleList } from '@/api/peoplemanger'
import TableComponent from '@/views/users/components/TableComponent.vue'
export default {
  name: 'DikedeIndex',
  components: {
    Dialog,
    TableComponent
  },
  data () {
    return {
      isLoading: false,
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        userName: ''
      },
      tableData: [],
      tableCols: [
        { label: '序号', type: 'index', index: true },
        { label: '人员姓名', prop: 'userName', width: '400%' },
        { label: '归属区域', prop: 'regionName', width: '400%' },
        { label: '角色', prop: 'role.roleName', width: '400%' },
        { label: '联系电话', prop: 'mobile', width: '350%' }
      ],
      text: '新增',
      total: 0,
      totalPage: 0,
      search: '',
      type: 'add',
      currentId: 0
    }
  },

  created () {
    this.getListFn()
  },
  mounted () {},

  methods: {
    searchFn () {
      this.queryObj.userName = this.search
      this.getListFn()
      this.search = ''
    },
    async getListFn () {
      this.isLoading = true
      const data = await getPeopleList(this.queryObj)
      console.log(data)
      this.total = data.totalCount
      this.totalPage = data.totalPage
      this.tableData = data.currentPageRecords
      this.isLoading = false
    },
    open (type, id) {
      this.type = type
      if (type === 'edit') {
        this.currentId = id
        this.text = '编辑'
        this.$nextTick(() => {
          this.$refs.dialog.getDetail()
        })
        this.$refs.dialog.showDialog()
      } else {
        this.text = '新增'
        this.$refs.dialog.showDialog()
      }
    },
    async del (id) {
      await delPeople(id)
      this.$message.success('删除成功')
      this.getListFn()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.queryObj.pageIndex = val
      this.getListFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.userIndex {
  background-color: #f3f6fb;
}
.el-container {
padding: 20px;
}
::v-deep .el-table {
  td {
    padding: 2px 0;
    border: none;
  }
  &::before {
    height: 0;
  }
}
::v-deep .el-button--danger {
  width: 80px !important;
}
::v-deep .el-table--fit {
  margin-top: 20px;
}
::v-deep.el-header {
  margin-bottom: 20px;
   background-color: #fff;
  line-height: 60px;
  .search {
    margin-right: 20px;
    font-size: 14px;
    color: #606266;
  }
  .el-button--primary {
    background-color: #5f84ff;
    width: 100px;
    // margin-left: 20px;
  }
}
.el-main {
 background-color: #fff;;
}
.el-footer {
  line-height: 60px;
  background-color: #fff;
  span {
    font-size: 16px;
    color: #dbdfe5;
  }
  .el-pagination {
    margin-top: 10px;
  }
}
::v-deep .btn-prev:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-next:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-prev{
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .btn-next{
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
</style>
